<template>
  <div id="SoundEq">
    <div class="SoundEqHeader">
      <div class="font_header">声隐身装备的综合管理</div>
    </div>
    <SoundEqData ref="SoundEqData" v-if="actived=='数据显示'"/>
    <SoundEqHome ref="SoundEqHome" v-if="actived=='主页'"/>
    <SoundEqEdit ref="SoundEqEdit" v-if="actived=='参数设置'"/>
    <div class="SoundEqFooter">
      <div class="leftFooter" @click="()=>{actived='数据显示'}" :class="{activeStyle:actived=='数据显示'}">数据显示</div>
      <div class="centerFooter" @click="()=>{actived='主页'}" :class="{activeStyle:actived=='主页'}">主页</div>
      <div class="rightFooter" @click="()=>{actived='参数设置'}" :class="{activeStyle:actived=='参数设置'}">参数设置</div>
    </div>
    <div class="backFooter" @click="$router.push('/EquipmentTrain')">返回</div>
  </div>
</template>

<script>
import SoundEqData from "@/components/SoundEq/SoundEqData.vue"
import SoundEqHome from "@/components/SoundEq/SoundEqHome.vue";
import SoundEqEdit from "@/components/SoundEq/SoundEqEdit.vue";
export default {
  components: {
    SoundEqData,
    SoundEqHome,
    SoundEqEdit,
  },
  data() {
    return {
      actived:"数据显示",
      columns: [
        {
          dataIndex: "name",
          key: "name",
          slots: { title: "customTitle" },
          scopedSlots: { customRender: "name" },
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "Address",
          dataIndex: "address",
          key: "address",
        },
        {
          title: "Tags",
          key: "tags",
          dataIndex: "tags",
          scopedSlots: { customRender: "tags" },
        },
      ],
      data: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
          tags: ["loser"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
      ],
    };
  },
};
</script>

<style lang="scss">
#SoundEq {
  height: 100vh;
  background: url("~@/assets/img/bg.png") no-repeat 100%;

  .SoundEqHeader {
    text-align: center;
    height: 70px;
    line-height: 70px;
    font-size: 40px;
    font-weight: 600;
    font-family: "KaiTi", "楷体", serif;
    background: #112b43;

    .font_header {
      letter-spacing: 20px;
      background: linear-gradient(to bottom, #0c84ab, #ceecf4);
      -webkit-background-clip: text;
      /* 只在文字上显示背景 */
      -webkit-text-fill-color: transparent;
      /* 填充透明色，使背景渐变显示出来 */
    }
  }

  .SoundEqFooter {
    position: fixed;
    bottom: 0;
    /* 距离底部 0 */
    left: 50%;
    transform: translateX(-50%);
    /* 确保从左边开始 */
    width: 36%;
    /* 占满页面宽度 */
    display: flex;
    // justify-content: space-between;
    // align-items: center;
    /* 垂直居中 */
    color: #906436;
    font-size: 16px;
    font-weight: 600;

    /* 左边和右边元素保持在两侧 */
    .leftFooter {
      width: 200px;
      height: 74px;
      line-height: 74px;
      text-align: center;
      background-image: url("~@/assets/img/centerFooter_a.png");
      background-size: contain;
      /* 背景图缩放以完整显示 */
      background-repeat: no-repeat;
      /* 防止背景图重复 */
      background-position: center;
      /* 将背景图居中显示 */
      margin-right: auto;
      cursor: pointer;
    }

    .centerFooter {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 74px;
      line-height: 74px;
      background-image: url("~@/assets/img/centerFooter_a.png");
      background-size: contain;
      /* 背景图缩放以完整显示 */
      background-repeat: no-repeat;
      /* 防止背景图重复 */
      background-position: center;
      /* 将背景图居中显示 */
      text-align: center;
      cursor: pointer;
    }

    .rightFooter {
      width: 200px;
      height: 74px;
      line-height: 74px;
      text-align: center;
      background-image: url("~@/assets/img/centerFooter_a.png");
      background-size: contain;
      /* 背景图缩放以完整显示 */
      background-repeat: no-repeat;
      /* 防止背景图重复 */
      background-position: center;
      /* 将背景图居中显示 */
      margin-left: auto;
      cursor: pointer;
    }
    .activeStyle{
      background-image: url("~@/assets/img/centerFooter_b.png");
    }
  }
  .backFooter {
    width: 200px;
    height: 74px;
    cursor: pointer;
    color: #906436;
    font-size: 16px;
    font-weight: 600;
    line-height: 74px;
    padding-left: 100px;
    position: fixed;
    bottom: 0;
    right: 0;
    background-image: url("~@/assets/img/rightFooter_a.png");
    background-size: contain;
      /* 背景图缩放以完整显示 */
      background-repeat: no-repeat;
      /* 防止背景图重复 */
      background-position: center;
  }
}
</style>
<style lang="scss">
#SoundEq {
  .ant-table-wrapper {
    width: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }

  .ant-table-thead {
    th {
      background: #0e344e !important;
      color: white !important;
    }
  }

  .ant-table-body {
    min-height: 680px;
    /* 设置表格的最小高度 */
    background: #0e344e !important;
    color: white;
    overflow-y: auto !important;
  }
}
</style>